<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="页面名称：" prop="pageName">
            <el-input v-model="queryParams.pageName" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编码：" prop="code" label-width="60px">
            <el-input v-model="queryParams.code" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属节点：" prop="nodeId">
            <treeselect
              class="treeselect"
              style="width: 100%"
              v-model="queryParams.nodeId"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/pageMg/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
      :refresh="false"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd"
          type="primary"
          plain
          size="mini"
          @click="onAdd"
          ><svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增</el-button
        >
      </template>
      <template #status="{ row }">
        <dict-tag
            :options="dict.type.sys_business_status"
            :value="row.status"
          />
      </template>
      <template #operate="{ row }">
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('编辑', row)"
          :disabled="row.status == 2 || row.status == 4 || row.status == 3"
          ><svg-icon
            icon-class="table-column-edit"
            style="width: 16px; height: 16px"
          />
          编辑
        </el-button>
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('重新提交', row)"
          :disabled="row.status == 1"
          >
          重新提交
        </el-button>
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('删除', row)"
          ><svg-icon
            icon-class="table-column-delete"
            style="width: 16px; height: 16px"
          />
          删除
        </el-button>
      </template>
    </table-panel>
    <el-dialog
      :title="title"
      :visible.sync="open"
      v-if="open"
      width="458px"
      append-to-body
      :destroy-on-close="true"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="110px"
        size="mini"
      >
        <el-form-item v-show="title !== '新增页面'" label="编码" required>
          {{ form.code }}
        </el-form-item>
        <el-form-item label="所属节点：" prop="nodeId">
          <treeselect
            v-model="form.nodeId"
            :options="menuOptions"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择所属节点"
            :disabled="selectDisabled"
          />
        </el-form-item>
        <el-form-item label="页面名称：" prop="pageName">
          <el-input v-model="form.pageName" placeholder="请输入内容" :disabled="selectDisabled"/>
        </el-form-item>
        <el-form-item label="页面类型：" prop="pageType">
          <el-select
            style="width: 100%"
            v-model="form.pageType"
            placeholder="请选择页面类型"
            @change="handelPageType"
            disabled
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="submitForm"
        >
          {{ form.pageType === "3" ? "保存" : "确定" }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          v-if="form.pageType === '3'"
          @click="handleSubmit"
        >
          提交
        </el-button>
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="cancel"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  deletePageList,
  addPageManage,
  editListColumn,
  sumbitPageMg,
} from "@/api/pageManage/page.js";
import { serachNodeList } from "@/api/nodeManage/node";
export default {
  name: "pageManagemment",
  components: {
    TablePanel,
    QueryPanel,
    Treeselect,
  },
  dicts: ["sys_business_status"],
  data() {
    return {
      queryParams: {
        pageName: "",
        code: "",
        nodeId: undefined,
        moduleType: "2", // 模块类型
      },
      operateArray: [
        {
          name: "编辑",
          icon: "table-column-edit",
        },
        {
          name: "删除",
          icon: "table-column-delete",
        },
      ],
      columns: [
        {
          field: "pageName",
          label: "页面名称",
        },
        {
          field: "code",
          label: "编码",
        },
        {
          field: "nodeName",
          label: "所属节点",
        },
        {
          field: "createTime",
          label: "创建时间",
          type: "date",
        },
        {
          field: "status",
          label: "状态",
          slots: { default: "status" }
        },
        {
          label: "操作",
          type: "custom",
          width: "300px",
          slots: { default: "operate" },
        },
      ],
      open: false,
      title: "新增页面",
      form: {
        moduleType: "2", // 模块类型
        code: "",
        nodeId: undefined,
        pageName: "",
        pageType: "1",
      },
      roleOptions: [
        { roleName: "图文展示", roleId: "1" },
        { roleName: "产品配置", roleId: "3" },
      ],
      menuOptions: [],
      postOptions: [],
      rules: {
        nodeId: [
          { required: true, message: "上级节点不能为空", trigger: "change" },
        ],
        pageName: [
          { required: true, message: "页面名称不能为空", trigger: "blur" },
        ],
        pageType: [
          { required: true, message: "页面类型不能为空", trigger: "change" },
        ],
      },
      selectDisabled: false
    };
  },
  mounted() {
    this.init();
    this.handleQuery();
  },
  methods: {
    async init() {
      await this.getTreeselect();
    },
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 新增
    onAdd() {
      this.selectDisabled = false;
      this.form = {
        moduleType: "2", // 模块类型
        code: "",
        nodeId: undefined,
        pageName: "",
        pageType: "1",
        originPageId: ''
      };
      this.title = "新增页面";
      this.getTreeselect();
      this.open = true;
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },
    cancel() {
      this.open = false;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.pageType == 1) {
            this.$router.push({
              path: "/shelves/stencil",
              query: { type: "shelves", data: JSON.stringify(this.form) },
            });
          } else {
            if (this.title === "新增页面") {
              addPageManage(this.form)
                .then((res) => {
                  this.$refs.tablePanel.getTable();
                  this.$message.success("操作成功！");
                  this.open = false;
                })
                .catch((err) => {
                  this.$message.error("操作失败！");
                });
            } else {
              editListColumn(this.form)
                .then((res) => {
                  this.$refs.tablePanel.getTable();
                  this.$message.success("操作成功！");
                  this.open = false;
                })
                .catch((errv) => {
                  this.$message.error("操作失败！");
                });
            }
          }
        }
      });
    },
    // 提交按钮
    handleSubmit() {
      sumbitPageMg(this.form).then((res) => {
        this.$refs.tablePanel.getTable();
        this.$message.success("操作成功！");
        this.open = false;
      });
    },
    onOperate(type, row) {
      this.selectDisabled = false;
      if (type === "编辑" || type === '重新提交') {
        this.title = "编辑";
        this.form.code = row.code;
        for (let d in this.form) {
          this.form[d] = row[d];
        }
        if(type === '重新提交'){
          this.form.code = '';
          this.form.originPageId = row.pageId;
          this.selectDisabled = true;
        }
        this.form.pageId = row.pageId;
        this.form.templateId = row.templateId;
        this.getTreeselect();
        this.open = true;
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      } else if (type === "删除") {
        this.$confirm("确认删除吗？").then(() => {
          deletePageList(row.pageId)
            .then((res) => {
              this.$refs.tablePanel.getTable();
              this.$message.success("操作成功！");
            })
            .catch((err) => {
              this.$message.error("操作失败！");
            });
        });
      }
    },
    getTreeselect() {
      serachNodeList({ moduleType: 2 }).then((res) => {
        this.menuOptions = res.rows;
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children === null) {
        delete node.children;
      }
      return {
        id: node.nodeId,
        label: node.nodeName,
        children: node.children,
      };
    },
    // 监听页面类型的变化
    handelPageType() {},
  },
};
</script>

<style scoped lang="scss">
::v-deep .cell{
  span{
    font-size: 16px;
  }
  .ordinary-btn {
    width: 80px;
    height: 32px;
    border: 1px solid #dcdcdc;
    font-size: 16px;
    span {
      color: #333333e6;
    }
  }
}
</style>
